import React,{useState,useEffect} from 'react'
import { PageHeader,Button,message  } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import {post} from '@/Utils/axios'
import {Url} from '@/Utils/services/url'
import { history } from 'umi';
import '../style/header.less'
import MessageInfoText from '../../activity/components/messageInfoText'
export default function header(props:any) {
  const [routeName,setRouteName] = useState('')
  const [userInfo,setUserInfo] = useState({})
  const [flag,setFlag] = useState(false)
  useEffect(()=>{
    let url = props.props.location.pathname
    let name = props.props.route.routes.filter((t:any)=>t.path == url)
    if(name.length > 0){
      setRouteName(name[0].title)
    }
    
  },[props])
  useEffect(()=>{
    let useInfo = window.sessionStorage.getItem('useinfo')
    setUserInfo({...JSON.parse(useInfo)})
  },[])
  function showLoginout(){
    setFlag((flag)=>{
      return !flag
    })
  }
  function logout(){
    post(Url.logout,{}).then(res =>{
      console.log('退出登录',res)
      if(res == true){
        message.success('退出登录成功')
        window.sessionStorage.setItem('token','')
        history.push({
          pathname:'/login'
        })
      }
    })
  }
  const goHistory =()=>{
    history.goBack()
  }
  return (
    <div className="Header">
       <PageHeader
        className="site-page-header"
        onBack={goHistory}
        title={routeName}
        subTitle="This is a subtitle"
      />
      <div className='user_info'>
          <div className="user_header">
              <img src={userInfo.headPortrait}></img>
              <span onClick={showLoginout}>name</span>
          </div>
         {flag && <div className='login_out'>
              <Button onClick={logout}>退出登录</Button>
          </div>}
        </div>
    </div>
  )
}
